<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>:: Perfil ${usuario.nombre} ::</title>
	<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />

        <script type="text/javascript" src="script/validarB.js"></script>
        <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" 

            type="text/javascript"></script>

    <script type="text/javascript">



    var map;

    var geocoder;



    function initialize() {

      map = new GMap2(document.getElementById("map_canvas"));

      map.setCenter(new GLatLng(40.452557, -3.510673), 15);

      

      // insertar los controles

      map.addControl(new GSmallMapControl());

      map.addControl(new GMapTypeControl());

      

      geocoder = new GClientGeocoder();

    }



    // addAddressToMap() is called when the geocoder returns an

    // answer.  It adds a marker to the map with an open info window

    // showing the nicely formatted version of the address and the country code.

    function addAddressToMap(response) {

      map.clearOverlays();

      if (!response || response.Status.code != 200) {

        alert("Lo sentimos, no se ha encontrado su direcci&ocute;n");

      } else {

        place = response.Placemark[0];

        point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);

        

        map.setCenter(point, 15);

        

        marker = new GMarker(point, {draggable: true});

        

        GEvent.addListener(marker, "dragstart", function() {

          map.closeInfoWindow();

        });



        GEvent.addListener(marker, "dragend", function() {

          document.getElementById("punto").value = marker.getLatLng().toUrlValue();

          marker.openInfoWindowHtml(place.address);

          generateKML(place.address, marker.getLatLng().lng(), marker.getLatLng().lat());

        });

        

        map.addOverlay(marker);

        marker.openInfoWindowHtml(place.address);

        document.getElementById("punto").value = marker.getLatLng().toUrlValue();

        

        generateKML(place.address, place.Point.coordinates[0], place.Point.coordinates[1]);

        

      }

    }

    

    // showLocation() is called when you click on the Search button

    // in the form.  It geocodes the address entered into the form

    // and adds a marker to the map at that location.

    function showLocation() {

      var address = document.forms[0].q.value;

      geocoder.getLocations(address, addAddressToMap);

    }



   // findLocation() is used to enter the sample addresses into the form.

    function findLocation(direccion, empresa ) {

      document.forms[0].q.value = direccion;

      document.getElementById("empresa").value = empresa;

      showLocation();

    }

    

    function generateKML(description, lng, lat){

      document.getElementById("kml").value = '';

      var kml = '<?xml version="1.0" encoding="UTF-8"?>\n';

      kml = kml + '<kml xmlns="http://earth.google.com/kml/2.2">\n';

      kml = kml + '<Placemark>\n';

      kml = kml + '\t<name>' + document.getElementById("empresa").value + '</name>\n';

      kml = kml + '\t<description>' + description + '</description>\n';

      kml = kml + '\t<Point><coordinates>' + lng + ',' + lat + ',0</coordinates></Point>\n'; 

      kml = kml + '</Placemark>\n';

      kml = kml + '</kml>\n'

      document.getElementById("kml").value = kml;

    }

    </script>

</head>

<body>
  <div id="wrapper">
    
    <div id="header">
      <div id="logo">
        <p></p>
      </div>
      <div id="nav">
         <ul class="menu">
              <li class="sub"><a href="#" class="update">Opciones<comment></comment></a>
		<ins><table><tr><td><ul>
			<li><a href="modificarUsuario.html?ux=${usuario.idUsuario}">Modificar Datos</a></li>
			<li><a href="desactivarUsuario.html?ux=${usuario.idUsuario}">Opciones de Cuenta</a></li>
            <li><a href="rest.html?ux=${usuario.idUsuario}">REST</a></li>
                        <li><a href="home.html?ux=null">Cerrar Sesión</a></li>
		</ul></td></tr></table></ins>
        </li>
          <li><a href="misSolicitudes.html?ux=${usuario.idUsuario}&soli=0"> Solicitudes</a></li>
         <li><a href="miPerfilhayTour.html?ux=${usuario.idUsuario}"> Perfil ${usuario.username}</a></li>
         </ul>
      </div>
      <div id="gallery">
        <ul>
          <li class="gwomen"><a href="http://www.freewebsitetemplates.com">Viajes</a></li>
          <li class="gkids"><a href="http://www.freewebsitetemplates.com">Aventuras</a></li>
          <li class="gmen"><a href="http://www.freewebsitetemplates.com">Amigos</a></li>
        </ul>
      </div>
    </div>
    <div id="body">
      <div id="categories">
        <h2>${usuario.nombre} ${usuario.apellido}</h2>
        <h2><img src="images/Perfil.jpg" alt="" width="192" height="244" id="Perfil" /></h2>
        <ul>
          <li><a href="MisAmigos.html?ux=${usuario.idUsuario}&AM=1">Mis Amigos</a></li>
          <li><a href="LosViajes.html?ux=${usuario.idUsuario}&AM=1">Mis Viajes</a></li>
        </ul>
      </div>
      <div id="seasonal">
        <div class="inner">
          <h2 class="clear"><strong>Buscar Amigos en hayTour</strong></h2>
              <a href="javascript:void(0)" onclick="findLocation('Avenida de Castilla 2, San Fernando de Henares', 'Autentia');return false;">Ir a Autentia</a><br/>

    

    <p>

         <b>Escribe el nombre de tu empresa:</b>

         <input id="empresa" type="text" size="40"/>

    </p>

    

    <form action="#" onsubmit="showLocation(); return false;">

      

      <p>

        <b>Escribe aqu&iacute; tu direcci&oacute;n:</b>

        <input type="text" name="q" value="" class="address_input" size="40" />

        <input type="submit" name="find" value="Buscar" />

      </p>

    </form>

    

    <div id="map_canvas" style="width: 450px; height: 250px"></div>

    

    <p>

      <b>Coordenadas:</b>

      <input id="punto" type="text" size="40"/>

    </p>
  </p>

          <p>&nbsp;</p>
        </div>
      </div>
      <div id="collection">
        <div class="inner"> <table width="348" border="0" align="center">
                    <tr>
                      <td width="339"><a href="fromCrearViajes.html?ux=${usuario.idUsuario}"></a><a href="fromCrearViajes.html?ux=${usuario.idUsuario}"></a><a href="fromCrearViajes.html?ux=${usuario.idUsuario}"><img src="images/crearViajes.jpg" width="342" height="119" border="0"/></a></td>
                    </tr>
                </table>
          <br />
        </div>
      </div>
      <div class="clear"></div>
      <div id="seas">
        <div id="seas-one">
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="gkids">&nbsp;</h4>
          <h4 class="clear">&nbsp;</h4>
        </div>
        <div id="seas-two"></div>
        <div id="seas-three"></div>
        <div class="clear"> </div>
      </div>
    </div>
    <div id="copyright">
      <h5>Copyright &copy; 2010. Company hayTour all rights reserved</h5>
</div>
  </div>
</body>
</html>
